<template>
  <div class="DSL-instrument">
    <div class="content-box">
      <div class="content-top">
        <ul class="ul-class">
     <template>
            <li class="li-class" >
              <img src="@/assets/public/监测正常.png" alt />
              <div class="li-center__box">
                <p class="p1">全部</p>
              </div>
              <span>24</span>
            </li>
             <li class="li-class" >
              <img src="@/assets/public/监测正常.png" alt />
              <div class="li-center__box">
                <p class="p1">正常设备</p>
              </div>
              <span>24</span>
            </li>
              <li class="li-class" >
              <img src="@/assets/public/监测异常.png" alt />
              <div class="li-center__box">
                <p class="p1">停运设备</p>
              </div>
              <span>24</span>
            </li>
            <li class="li-class" >
              <img src="@/assets/public/监测异常.png" alt />
              <div class="li-center__box">
                <p class="p1">异常设备</p>
              </div>
              <span>24</span>
            </li>
            <li class="li-class" >
              <img src="@/assets/public/监测报警.png" alt />
              <div class="li-center__box">
                <p class="p1">故障设备</p>
              </div>
              <span>24</span>
            </li>
          </template>
        </ul>
      </div>
      <div class="content-center">
        <template v-for="(v,i) in 16">
          <div class="list-box" :key="i">
            <img src="@/assets/设备图.png" alt />
            <div class="list-box__right">
              <div class="right-name">
                <img src="@/assets/public/监测报警小.png" alt />
                <span>5号设备</span>
              </div>
              <div class="address-box">
                <p>地址:</p>
                <p>江苏省 南京市 天印大道 XXXXXXXX监测站</p>
              </div>
              <div class="address-box">
                <p>故障时间:</p>
                <p>2020-06-01 12:00</p>
              </div>
            </div>
          </div>
      
        </template>
      </div>
      <div class="content-bottom clearfix">
        <div class="page-box">
          <a-pagination
            :show-total="total => `共 ${total} 件设备`"
            v-model="current"
            :total="160"
            :defaultPageSize="16"
            :item-render="itemRender"
            @change="pagechangeFn"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      current: 1,
      arr: [1, 1, 1, 2, 3],
    };
  },
  methods: {
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      console.log(page, pageSize);
    },
  },
  mounted() {},
};
</script>
<style  scoped lang="scss">
::v-deep .anticon svg {
  color: #bebebe;
}
::v-deep .ant-upload-list-item-name {
  color: #bebebe;
}
::v-deep .ant-upload-list-item:hover .ant-upload-list-item-info {
  background-color: #2c6a5f;
}
.DSL-instrument {
  width: 98%;
  height: 100%;
  padding: 2%;
  box-sizing: border-box;
}
.content-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.content-top {
  width: 100%;
  height: 15%;
}
.ul-class {
  width: 102%;
  height: 100%;
  background: url(../../../assets/public/监测.png) no-repeat;
  background-size: 100% 100%;
  padding: 2% 1%;
  box-sizing: border-box;
  display: flex;
  margin-left: -1%;
}
.li-class {
  width: 20%;
  height: 100%;
  border-left: 1px solid #37ddc0;
  padding: 0 2%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.li-class:first-child {
  border-left: 0;
}
.li-class > img {
  width: 60px;
}
.li-class .li-center__box .p1 {
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
}
.li-class .li-center__box .p2 {
  font-size: 16px;
}
.li-class > span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 46px;
}

.content-center {
  width: 100%;
  height: 75%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
}
.content-center .list-box {
  width: 24%;
  height: 24%;
  border: 1px solid #a4574a;
  border-radius: 6px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}

.content-center .normal {
  border: 1px solid #89c953;
}

.content-center .list-box > img {
  width: 45%;
  height: 100%;
}
.list-box__right {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.normal-right {
  justify-content: space-around;
}
.right-name > img {
  height: 24px;
  vertical-align: middle;
}
.right-name > span {
  color: rgba(255, 255, 255, 0.7);
  line-height: 20px;
  padding-left: 6px;
  vertical-align: middle;
}
.address-box {
  font-size: 14px;
  color: #207064;
}

.content-bottom {
  width: 100%;
}
.page-box {
  float: right;
  display: flex;
  align-items: center;
}
.totalclass {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-right: 20px;
}
/* 分页 */
::v-deep.DSL-instrument .ant-pagination-total-text {
  color: rgba(255, 255, 255, 0.7);
}
</style>